import React, {Component} from "react";
import "./TopBar.css"
import {createTheme, styled, ThemeProvider} from '@mui/material/styles';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import SearchIcon from '@mui/icons-material/Search';
import {alpha, Grid, InputBase} from "@mui/material";
import {Link, Navigate} from "react-router-dom";
import PubSub from "pubsub-js";

const theme = createTheme({
    palette: {
        secondary: {
            main: '#ff0202',
            contrastText: '#ff0202'
        },
    },
});
const Search = styled('div')(({ theme }) => ({
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: alpha(theme.palette.common.white, 0.15),
    '&:hover': {
        backgroundColor: alpha(theme.palette.common.white, 0.25),
    },
    marginRight: theme.spacing(2),
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(3),
        width: 'auto',
    },
}));

const SearchIconWrapper = styled('div')(({ theme }) => ({
    padding: theme.spacing(0, 2),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
    color: 'inherit',
    '& .MuiInputBase-input': {
        padding: theme.spacing(1, 1, 1, 0),
        // vertical padding + font size from searchIcon
        paddingLeft: `calc(1em + ${theme.spacing(4)})`,
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('md')]: {
            width: '20ch',
        },
    },
}));
export default class TopBar extends Component{

    state = {
        value:'1',
        toSearch:false,
        keywords:""
    };
    key=0;
    componentDidMount() {
        this.key = PubSub.subscribe("changeTopBarByUrl",this.handleChangeByUrl);
    }
    componentWillUnmount() {
        PubSub.unsubscribe(this.key);
    }
    handleChangeByUrl = (msg,data) => {
        this.setState({value:data})
    }
    handleChange = (event, newValue) => {
        this.setState({value:newValue})
    };
    searchSubmit = (event) => {
        if(event.key === "Enter") {
            //console.log('@@@'+event.target.value)
            event.target.blur()
            this.setState({keywords:event.target.value})
            this.setState({toSearch:true})

        }
    }
    toSearch = (r) => {
        this.setState({toSearch:false})
        //console.log('leave')
        PubSub.publish('changSearchTopBar',0);
        PubSub.publish('changSearchKeyWorld',this.state.keywords);
        return <Navigate to='/search' state={{keywords:this.state.keywords}}/>
    }
    render() {

        return (
            <header id='header'>
                <Grid container
                      direction="row"
                      justifyContent="center"
                      alignItems="center"
                >


                        <ThemeProvider theme={theme}>
                            <Grid   className='navs' item xs={2}>
                                <Search>
                                    <SearchIconWrapper>
                                        <SearchIcon />
                                    </SearchIconWrapper>
                                    <StyledInputBase
                                        onKeyDown={(e)=>this.searchSubmit(e)}
                                        placeholder="搜索歌曲"
                                        inputProps={{ 'aria-label': 'search' }}
                                    />
                                </Search>
                            </Grid>
                            <Grid item>

                                    <Tabs className='navs' textColor="inherit"  value={this.state.value} onChange={this.handleChange}
                                          indicatorColor='secondary'
                                          aria-label="nav tabs example">
                                        <Tab label="推荐" value="1" to="/recommend" component={Link} />
                                        <Tab label="歌单" value="2" to="/playlistPage" component={Link} />
                                        <Tab label="排行榜" value="3" to="/topList" component={Link} />
                                        <Tab label="歌手" value="4" to="/singerListPage" component={Link} />
                                    </Tabs>

                            </Grid>
                        </ThemeProvider>

                    {this.state.toSearch?this.toSearch():""}

                </Grid>
            </header>
        );
    }

}
